<template>
	<vs-col :w="2">
		<div class="barra">组件属性</div>
		<div class="form scrollbar">
			<vs-input
				success
				v-if="animation"
				class="vsinput"
				v-for="(value, key, index) in selectedComponent"
				:key="key"
				:style="`--time:${index * 0.2 + 1}s`"
				v-model="selectedComponent[key]"
				:type="getInputType(key).type"
				:disabled="getInputType(key).disabled"
				:label-placeholder="getInputType(key).title"
			/>
			<div class="none" v-if="!animation">暂无选中的组件</div>
		</div>
		<vs-button class="dlt" v-if="animation" danger @click="deleteComponentList">删除组件</vs-button>
	</vs-col>
</template>

<script>
import { inputType } from '@/common/json.js';
export default {
	name: 'attribute',
	data() {
		return {
			mould: this.$store.getters.mould,
			mouldStates: this.$store.getters.mouldStates,
			selectedComponent: null,
			selectedIndex: null,
			count: 0,
			animation: false
		};
	},
	computed: {
		getInputType() {
			return name => {
				var jsons = inputType.find(e => {
					return e.name === name;
				});
				return jsons;
			};
		}
	},
	watch: {
		'$store.state.mould': {
			immediate: true,
			deep: true,
			handler(e) {
				this.mould = e;
			}
		},
		'$store.state.mouldStates': {
			immediate: true,
			deep: true,
			handler(e) {
				this.mouldStates = e;
			}
		},
		'$store.state.selectedIndex': {
			immediate: true,
			deep: true,
			handler(e) {
				// 重置动画
				if (e == 0 || e > 0) {
					var selectedComponent = this.$store.state.componentList[e];
					if (this.selectedIndex != e || !this.selectedComponent) {
						this.animation = false;
						this.$nextTick(() => {
							this.animation = true;
						});
					}
					var count = 0;
					for (var i in selectedComponent) {
						count += 1;
					}
					this.count = count;
					this.selectedComponent = selectedComponent;
				} else {
					this.animation = false;
					this.selectedComponent = null;
				}
				this.selectedIndex = e;
			}
		}
	},
	methods: {
		deleteComponentList() {
			this.$confirm('此操作将该组件从模板上移除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$store.commit('deleteComponentList');
				this.$message({
					type: 'success',
					message: '组件移除成功!'
				});
			});
		}
	}
};
</script>
<style scoped>
.vsinput {
	animation: rl var(--time) 1;
	margin-top: 30px;
}
.form {
	height: 80vh;
	padding: 0 30px;
}

.none {
	color: #9c9c9c;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.dlt {
	animation: fade-in 1.5s 1;
	width: 13.5%;
	position: fixed;
	margin-left: 30px;
	bottom: 10px;
}
</style>
